<!DocType html>
<html>
    <head>demo</head>
    <body>
		<form>
			<input type="text" name="tel1" id="txtTel1" maxlength="3"><br>
			<input type="text" name="tel2" id="txtTel2" maxlength="3"><br>
			<input type="text" name="tel3" id="txtTel3" maxlength="4"><br>
		</form>

	<script src="../js/EventUtil.js"></script>
	<script>
	(function(){
		function tabForward(event){
			event = EventUtil.getEvent(event);
			var target = EventUtil.getTarget(event);
			var keyCode = EventUtil.getCharCode(event);
			
			if(target.value.length == target.maxLength){
				var form = target.form;
				for(var i=0,len=form.elements.length;i<len;++i){
					if(form.elements[i] == target){
						if(form.elements[i+1]){
							form.elements[i+1].focus();
						}
						return;
					}
				}
			}else if(target.value.length == 0 && keyCode == 8){ // <- back key		
				if(target.datav && target.datav==1){
					var form = target.form;
					for(var i = 0,len=form.elements.length;i<len;++i){
						if(form.elements[i] == target){
							if(form.elements[i-1]){
								form.elements[i-1].focus();
							}
							return;
						}
					}
				}else{
					target.datav=1;
				}
			}else if(target.value.length > 0 && (target.datav && target.datav == 1)){
				target.datav = 0;
			}
		}
		var textbox1 = document.getElementById("txtTel1");
		var textbox2 = document.getElementById("txtTel2");
		var textbox3 = document.getElementById("txtTel3");

		EventUtil.addHandler(textbox1, "keyup", tabForward);
		EventUtil.addHandler(textbox2, "keyup", tabForward);
		EventUtil.addHandler(textbox3, "keyup", tabForward);
	})();

	</script>
    </body>
</html>